<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示模式</title>
</head>
<style>
    div{
        height: 50px;
        width: 200px;
        border: blue 5px solid;
        display: block;
        /*块级元素，竖着排，可以设置宽高*/
    }
    span{
        width: 200px;
        height: 200px;
        border: 2px solid yellow;

        display: block;
        display: inline;/*行内元素，横着排，无法设置宽高，由内容支撑*/
        /*display显示模式有block和inline，可以修改*/
    }
    input,button{
        width: 200px;
        height: 200px;
        display: inline-block;
        /*行内块，仅限于input button 既可以设置大小又可以横着排*/
    }
    .d2{
        display: none;

    }
    /*display：none元素在页面上消失*/
</style>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div  class="d3"></div>
<hr>
<span>123456789</span>
<span>123456789</span>
<span>123456789</span>
<hr>
<input type="text">
<input type="text">
<input type="text">
<button>我是按钮</button>
</body>
</html>